<template>
  <div class="app-container">
    <el-card class="search_card" shadow="hover">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="margin-left: 20px;"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="handleSearchList"
        >
          搜索
        </el-button>
        <el-button
          size="mini"
          @click="handleResetSearch"
          icon="el-icon-refresh"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          size="small"
          :model="queryParams"
          label-width="140px"
        >
          <el-form-item label="证书产品分类:">
            <treeselect
              v-model="queryParams.classifyId"
              :options="cateOptions"
              :normalizer="normalizer"
              placeholder="请选择证书产品分类"
              class="cateSelect"
            />
          </el-form-item>
          <el-form-item label="证书产品名称">
            <el-input
              v-model="queryParams.certificateName"
              class="input-width"
              placeholder="请输入证书产品名称"
              clearable
              @clear="handleSearchList"
            />
          </el-form-item>
        </el-form>

      </div>
    </el-card>

    <el-card class="operate-container" shadow="hover" style="margin: 20px 0px;">
      <i class="el-icon-tickets" />
      <span>产品证书列表</span>
      <el-button
        icon="el-icon-plus"
        size="mini"
        type="primary"
        @click="handleAddGood"
        class="littleMarginLeft"
        v-hasPermi="['goods:goodList:add']"
      >
        添加
      </el-button>
      <el-button
        icon="el-icon-delete"
        size="mini"
        type="danger"
        @click="delAllSelection"
        class="littleMarginLeft"
        v-hasPermi="['goods:goodList:del']"
      >
        批量删除
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="goodsList"
        :data="list"
        max-height="550"
        style="width: 100%;"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="产品证书描述：">
                <span>{{ props.row.details }}</span>
              </el-form-item>
              <el-form-item label="适用行业：">
                <span>{{ props.row.applyIndustry }}</span>
              </el-form-item>
              <!-- <el-form-item label="图片列表：">
                <div v-for="item in props.row.pics.split(',')" class="imgBox">
                  <img :src="imgUrl + item" alt="" class="pic">
                </div>
              </el-form-item> -->
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="编号" align="center" />
        <el-table-column
          label="产品证书名称"
          align="center"
          prop="certificateName"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="标题"
          align="center"
          prop="title"
          min-width="200"
        ></el-table-column>
        <el-table-column label="证书产品类别" align="center" min-width="100">
          <template slot-scope="scope">
            {{getCateName(scope.row.classifyId)}}
          </template>
        </el-table-column>
        <el-table-column label="证书样片" align="center" min-width="200">
          <template slot-scope="scope">
            <img style="height: 80px" :src="showUrl + scope.row.logo" />
          </template>
        </el-table-column>
        <el-table-column label="是否设为主要推荐" align="center" prop="mainPush" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.mainPush == 1">主要推荐</el-tag>
            <el-tag v-if="scope.row.mainPush == 2" type="info">常规</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" width="70"></el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '1'">上架</el-tag>
            <el-tag type="warning" v-else>下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="210" v-if="checkRole(['admin','manager'])">
          <template slot-scope="scope" >
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleUpdateInfo(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDel(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getGoodsList"
    />
  </div>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { queryGood, delGood, queryGoodsCate } from "@/api/goods/goods";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  classifyId: undefined,
  certificateName: ""
};

export default {
  name: "goodsList",
  components: { Treeselect },
  data() {
    return {
      // 查询参数
      queryParams: Object.assign({}, defaultListQuery),
      cateOptions: [],
      cateOptions1: [],
      list: [],
      total: 0,

      // 多选框数据
      ids: [],

      // 规格弹框
      specVisible: false,
      specData: []
    };
  },
  created() {
    this.getGoodsList();
    this.getTreeselect();
  },
  watch:{
    $route(to,from) {
      if(from.name == "GoodAdd"){
        this.getGoodsList();
        this.getTreeselect();
      }
    },
    'queryParams.classifyId': 'changeClassify'
  },
  methods: {
     checkRole,
     checkPermi,
    // 查询商品分类下拉树结构
    getTreeselect() {
      queryGoodsCate().then(res => {
        this.cateOptions1 = res.rows;
        this.cateOptions = this.handleTree(res.rows, "id");
      });
    },
    // 转换商品分类数据结构
    normalizer(node) {
      if (node.children == null || node.children == "null") {
        delete node.children;
      }
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.classifyName,
        children: node.children
      };
    },
    changeClassify(val){
      this.handleSearchList();
    },
    // 获取分类名称数据
    getCateName(id){
      // console.log(this.cateOptions1,'分类-----------------------')
      let cate = this.cateOptions1.find(item => {
        return item.id == id;
      })
      if(cate != undefined){
        return cate.classifyName;
      }
    },
    // 获取商品列表
    getGoodsList() {
      queryGood(this.queryParams)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.list = res.rows;
            this.total = res.total;
          } else {
            return this.msgError("获取商品数据失败");
          }
        })
        .catch(e => {
          this.$message.error(e);
        });
    },
    // 点击重置
    handleResetSearch() {
      this.queryParams = Object.assign({}, defaultListQuery);
      this.getGoodsList();
    },
    // 点击搜索
    handleSearchList() {
      this.queryParams.pageNum = 1;
      this.getGoodsList();
    },

    // 多选框选择
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    // 点击批量删除按钮
    delAllSelection() {
      if (this.ids.length == 0) {
        return this.msgError("必须选择一项进行操作！");
      } else {
        var str = this.ids.join(",");
      }
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteData(str);
          this.ids = [];
        })
        .catch(() => {});
    },
    // 点击删除按钮
    handleDel(index,row) {
      this.$confirm("确定要删除吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          console.log(row.id)
          this.deleteData(row.id);
        })
        .catch(() => {});
    },
    // 实现删除商品
    deleteData(id) {
      delGood(id).then(res => {
        if (res.code == 200) {
          this.msgSuccess("删除成功");
          this.getGoodsList();
        } else {
          this.msgError("删除失败！");
        }
      });
    },


    // 点击添加商品
    handleAddGood() {
      this.$router.push({
        name: "GoodAdd",
        query: { goodId: '-100' }
      });
    },
    // 点击编辑商品信息
    handleUpdateInfo(index, row) {
      // 跳转到商品信息编辑页面
      console.log(index, row);
      this.$router.push({
        name: "GoodAdd",
        query: { goodId: row.id }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.cateSelect {
  width: 220px;
  z-index: 9999;
}
.table-container {
  margin-top: -21px;
}
.imgBox {
  display: inline-block;
}
.pic {
  display: inline-block;
  margin-right: 10px;
  width: 120px;
  height: 80px;
}
.littleMarginLeft {
  margin-left: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.search_card {
  overflow: unset !important;
}
</style>
